<template>
    <div class="down-form">
        <div class="table">
            <el-table
                    ref="logTable"
                    :data="tableData"
                    v-loading="loading"
                    border
                    header-cell-style="background: #eef1f6; color:#1f2d3d; border-color:#dfe6ec"
                    style="width: 100%;font-size: 14px;color: #1f2d3d">
                <el-table-column
                        prop="unitname"
                        label="单元名称"
                        min-width="16%"
                        show-overflow-tooltip
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="buildnum"
                        label="幢号"
                        min-width="8%"
                        show-overflow-tooltip
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="homenum"
                        label="房号"
                        min-width="10%"
                        show-overflow-tooltip
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="airnum"
                        label="空调"
                        min-width="6%"
                        show-overflow-tooltip
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="wifiname"
                        label="Wi-Fi"
                        min-width="15%"
                        show-overflow-tooltip
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="washnum"
                        label="洗衣机"
                        min-width="8%"
                        show-overflow-tooltip
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="createtime"
                        label="授予时间"
                        min-width="20%"
                        show-overflow-tooltip
                        :formatter="dateFormat"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="smartstatus"
                        label="状态"
                        min-width="9%"
                        align="center"
                        :formatter="typeFormatter">
                </el-table-column>
                <el-table-column label="操作状态" min-width="8%" align="center">
                    <template slot-scope="scope">
                        <el-tooltip :content="'Switch status: ' + scope.row.smartstatus" placement="top">
                            <el-switch
                                    :disabled="scope.row.id === 1"
                                    v-model="scope.row.smartstatus"
                                    @change="handleShowStatusChange(scope.row)"
                                    :active-value="1"
                                    :inactive-value="2">
                            </el-switch>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination @current-change="handleCurrentChange"
                           layout="total, sizes,prev, pager, next, jumper"
                           :current-page.sync="iPagination.current"
                           :page-size='iPagination.pageSize'
                           :page-sizes="iPagination.pageSizeOptions"
                           :total="iPagination.total"
                           background
                           @size-change="handleSizeChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        name: "smartDevice",
        data(){
            return{
                tableData: [],
                iPagination: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: [7, 10, 20, 50, 100],
                    total: 0,
                    "page": 0,
                    "pageSize": 10,
                },
                loading:false,
            }
        },
        created(){
            this.getSmartDevice()
        },
        methods:{
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getSmartDevice();
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getSmartDevice();
            },
            reload (e) {
                this.conditions = Object.assign(this.conditions, e);
                this.iPagination.current = 1
                this.loadData();
            },
            // 获取智能设备信息
            getSmartDevice(){
                this.loading = true;
                this.$Axios({
                    url: '/house/gethouseList',
                    method: 'get',
                    data:{
                        pageNum: this.iPagination.pageSize,
                        currPage: this.iPagination.current - 1
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        // this.loading = false
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },

            // 改变状态
            handleShowStatusChange(row){
                this.$confirm('确定更新该智能设备状态？', '提示', {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(()=>{
                    // const id = row.id;
                    this.$axiosToken({
                        url: '/house/updatesmartStatus',
                        method: 'post',
                        data:{
                            id: row.id,
                            smartstatus: row.smartstatus
                        },
                        success: (result) =>{
                            this.$message({
                                showClose: true,
                                message: '智能设备状态改变成功',
                                type: 'success'
                            });
                            this.getSmartDevice()
                        }
                    }).catch((reason)=>{
                        alert('改变失败'+reason)
                    })

                })
            },

            // 状态转为文字
            typeFormatter(row,column){
                const smartstatus = row.smartstatus
                if (smartstatus == 1){
                    return '完好'
                }else {
                    return '待维修'
                }
            },
            // 时间格式转化
            dateFormat(row,column) {
                var date = row[column.property];
                if(date == undefined){
                    return ''
                }else {
                    return moment(date).format("YYYY-MM-DD HH:mm:ss")

                }
            },

        }
    }
</script>

<style scoped>
    .block{
        float: right;
        margin-top: 10px;
    }
</style>